<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-box">
      <view class="search-input">
        <uni-icons type="search" size="18" color="#999"></uni-icons>
        <input type="text" v-model="searchKeyword" placeholder="搜索法律资讯" @input="onSearch" />
      </view>
    </view>

    <!-- 分类菜单 -->
    <scroll-view scroll-x class="category-scroll">
      <view class="category-list">
        <view 
          class="category-item" 
          v-for="(item, index) in categories" 
          :key="index"
          :class="{'active': currentCategory === item.id}"
          @tap="switchCategory(item.id)"
        >
          {{item.name}}
        </view>
      </view>
    </scroll-view>

    <!-- 关注列表 -->
    <view class="follow-section" v-if="currentCategory === 'follow'">
      <view class="follow-list">
        <view class="follow-item" v-for="(item, index) in followList" :key="index">
          <image class="avatar" :src="item.avatar" mode="aspectFill"></image>
          <view class="info">
            <text class="name">{{item.name}}</text>
            <text class="desc">{{item.description}}</text>
          </view>
          <button class="follow-btn" :class="{'followed': item.isFollowed}" @tap="toggleFollow(item)">
            {{item.isFollowed ? '已关注' : '关注'}}
          </button>
        </view>
      </view>
    </view>

    <!-- 资讯列表 -->
    <view class="news-list" v-else>
      <view class="news-item" v-for="(item, index) in newsList" :key="index" @tap="navigateToDetail(item)">
        <image class="cover" :src="item.cover" mode="aspectFill"></image>
        <view class="content">
          <text class="title">{{item.title}}</text>
          <text class="desc">{{item.description}}</text>
          <view class="meta">
            <view class="author">
              <image class="avatar" :src="item.author.avatar" mode="aspectFill"></image>
              <text>{{item.author.name}}</text>
            </view>
            <view class="stats">
              <text class="time">{{item.publishTime}}</text>
              <view class="actions">
                <view class="action-item">
                  <uni-icons type="eye" size="14" color="#999"></uni-icons>
                  <text>{{item.views}}</text>
                </view>
                <view class="action-item">
                  <uni-icons type="chat" size="14" color="#999"></uni-icons>
                  <text>{{item.comments}}</text>
                </view>
                <view class="action-item">
                  <uni-icons type="heart" size="14" :color="item.isLiked ? '#f5222d' : '#999'"></uni-icons>
                  <text>{{item.likes}}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 加载更多 -->
    <uni-load-more :status="loadMoreStatus"></uni-load-more>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      currentCategory: 'all',
      categories: [
        { id: 'all', name: '全部' },
        { id: 'follow', name: '关注' },
        { id: 'industry', name: '业内资讯' },
        { id: 'law', name: '法律速递' },
        { id: 'company', name: '企业新闻' },
        { id: 'video', name: '视频专区' },
        { id: 'qa', name: '问答' }
      ],
      followList: [],
      newsList: [],
      page: 1,
      pageSize: 10,
      loadMoreStatus: 'more'
    }
  },
  onLoad() {
    this.loadData()
  },
  onReachBottom() {
    if (this.loadMoreStatus === 'more') {
      this.loadMore()
    }
  },
  methods: {
    loadData() {
      // TODO: 加载数据
      this.loadMoreStatus = 'loading'
      // 模拟数据
      setTimeout(() => {
        if (this.currentCategory === 'follow') {
          this.followList = [
            {
              id: 1,
              name: '张律师',
              avatar: '/static/images/图片素材/律师1.jpg',
              description: '专注婚姻家事、合同纠纷',
              isFollowed: true
            },
            {
              id: 2,
              name: '李律师',
              avatar: '/static/images/图片素材/律师2.jpg',
              description: '专注刑事辩护、交通事故',
              isFollowed: false
            },
            {
              id: 3,
              name: '王律师',
              avatar: '/static/images/图片素材/律师3.jpg',
              description: '专注婚姻家事、劳动纠纷',
              isFollowed: true
            },
            {
              id: 4,
              name: '赵律师',
              avatar: '/static/images/图片素材/律师4.jpg',
              description: '专注刑事辩护、交通事故',
              isFollowed: false
            }
          ]
        } else {
          this.newsList = [
            {
              id: 1,
              title: '最新婚姻法司法解释出台',
              description: '最高人民法院发布关于适用《中华人民共和国民法典》婚姻家庭编的解释（一）',
              cover: '/static/images/图片素材/咨询1.jpg',
              author: {
                name: '张律师',
                avatar: '/static/images/图片素材/律师1.jpg'
              },
              publishTime: '2024-01-20',
              views: 1234,
              comments: 56,
              likes: 78,
              isLiked: false
            },
            {
              id: 2,
              title: '劳动法修订草案征求意见',
              description: '人社部就《中华人民共和国劳动法（修订草案）》公开征求意见',
              cover: '/static/images/图片素材/咨询2.jpg',
              author: {
                name: '李律师',
                avatar: '/static/images/图片素材/律师2.jpg'
              },
              publishTime: '2024-01-19',
              views: 2345,
              comments: 67,
              likes: 89,
              isLiked: true
            },
            {
              id: 3,
              title: '合同纠纷典型案例分析',
              description: '最高人民法院发布合同纠纷典型案例，为司法实践提供指导',
              cover: '/static/images/图片素材/咨询3.jpg',
              author: {
                name: '王律师',
                avatar: '/static/images/图片素材/律师3.jpg'
              },
              publishTime: '2024-01-18',
              views: 3456,
              comments: 78,
              likes: 90,
              isLiked: false
            },
            {
              id: 4,
              title: '交通事故赔偿新规解读',
              description: '最新交通事故赔偿标准出台，这些变化你需要了解',
              cover: '/static/images/图片素材/咨询4.jpg',
              author: {
                name: '赵律师',
                avatar: '/static/images/图片素材/律师4.jpg'
              },
              publishTime: '2024-01-17',
              views: 4567,
              comments: 89,
              likes: 101,
              isLiked: true
            }
          ]
        }
        this.loadMoreStatus = 'more'
      }, 1000)
    },
    loadMore() {
      this.page++
      // TODO: 加载更多数据
    },
    onSearch() {
      this.page = 1
      this.newsList = []
      this.loadData()
    },
    switchCategory(categoryId) {
      this.currentCategory = categoryId
      this.page = 1
      this.newsList = []
      this.followList = []
      this.loadData()
    },
    toggleFollow(item) {
      item.isFollowed = !item.isFollowed
      // TODO: 调用关注/取消关注接口
    },
    navigateToDetail(item) {
      uni.navigateTo({
        url: `/pages/news/detail?id=${item.id}`
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  padding-bottom: 30rpx;
}

.search-box {
  padding: 20rpx;
  background-color: #fff;
  
  .search-input {
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    padding: 10rpx 20rpx;
    border-radius: 30rpx;
    
    input {
      flex: 1;
      margin-left: 10rpx;
      font-size: 28rpx;
    }
  }
}

.category-scroll {
  background-color: #fff;
  white-space: nowrap;
  
  .category-list {
    display: inline-flex;
    padding: 20rpx;
    
    .category-item {
      padding: 10rpx 30rpx;
      font-size: 28rpx;
      color: #666;
      background-color: #f5f5f5;
      border-radius: 30rpx;
      margin-right: 20rpx;
      
      &.active {
        color: #fff;
        background-color: #1890ff;
      }
    }
  }
}

.follow-section {
  padding: 20rpx;
  
  .follow-list {
    .follow-item {
      display: flex;
      align-items: center;
      padding: 20rpx;
      background-color: #fff;
      border-radius: 12rpx;
      margin-bottom: 20rpx;
      
      .avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin-right: 20rpx;
      }
      
      .info {
        flex: 1;
        
        .name {
          font-size: 28rpx;
          font-weight: bold;
        }
        
        .desc {
          font-size: 24rpx;
          color: #666;
          margin-top: 10rpx;
        }
      }
      
      .follow-btn {
        font-size: 24rpx;
        color: #1890ff;
        background-color: rgba(24, 144, 255, 0.1);
        padding: 10rpx 30rpx;
        border-radius: 30rpx;
        
        &.followed {
          color: #999;
          background-color: #f5f5f5;
        }
      }
    }
  }
}

.news-list {
  padding: 20rpx;
  
  .news-item {
    display: flex;
    padding: 20rpx;
    background-color: #fff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    
    .cover {
      width: 200rpx;
      height: 150rpx;
      border-radius: 8rpx;
      margin-right: 20rpx;
    }
    
    .content {
      flex: 1;
      
      .title {
        font-size: 28rpx;
        font-weight: bold;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      
      .desc {
        font-size: 24rpx;
        color: #666;
        margin-top: 10rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      
      .meta {
        margin-top: 20rpx;
        
        .author {
          display: flex;
          align-items: center;
          
          .avatar {
            width: 40rpx;
            height: 40rpx;
            border-radius: 50%;
            margin-right: 10rpx;
          }
          
          text {
            font-size: 24rpx;
            color: #666;
          }
        }
        
        .stats {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 10rpx;
          
          .time {
            font-size: 24rpx;
            color: #999;
          }
          
          .actions {
            display: flex;
            
            .action-item {
              display: flex;
              align-items: center;
              margin-left: 20rpx;
              
              text {
                font-size: 24rpx;
                color: #999;
                margin-left: 6rpx;
              }
            }
          }
        }
      }
    }
  }
}
</style> 